<template>
	<div class="sw_section_container">
		<div class="sw_query_form" v-if="$isHasAuth(topFrames)">
			<el-form size="small" inline>
				<template v-if="$isHasAuth(topButton)">
					<el-form-item>
						<el-date-picker v-model="timeRanges" v-bind="dateConfig"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="queryTableData">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-refresh-left" @click="handleResetQuery">重置</el-button>
					</el-form-item>
				</template>
				<el-form-item v-hasPermi="'fe4d6cc2a7264ab8b2cea494bf0fd114'">
					<el-button type="warning" icon="el-icon-upload2" @click="handleExportData">导出</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="sw_table_container">
			<el-table size="medium" :data="tableData" stripe height="100%" class="index_table_wrapper" @selection-change="handleSelectionChange">
				<el-table-column type="selection"></el-table-column>
				<el-table-column label="成果名称" prop="filed1" min-width="200"></el-table-column>
				<el-table-column label="类型" prop="filed10Name" min-width="100"></el-table-column>
				<el-table-column label="单位" prop="dfiled2" min-width="160"></el-table-column>
				<el-table-column label="用户" prop="userName" min-width="120"></el-table-column>
				<el-table-column label="PI" prop="auditName" min-width="100"></el-table-column>
				<el-table-column label="测量技术" prop="filed100Name" min-width="100"></el-table-column>
			</el-table>
		</div>
		<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData"></sw-pagination>
	</div>
</template>

<script>
import moment from 'moment';
import mixins from '../mixins';
import { mapGetters } from 'vuex';
import { queryMarvelList, exportMarvelData } from '@/api/business/stat';

export default {
	data() {
		return {
			loading: false,
			timeRanges: [],
			dateConfig: {
				editable: false,
				clearable: false,
				type: 'daterange',
				rangeSeparator: '至',
				style: 'width: 280px;',
				endPlaceholder: '结束日期',
				startPlaceholder: '开始日期',
				class: 'date_picker_wrapper',
				valueFormat: 'yyyy-MM-dd HH:mm:ss'
			},
			queryData: {
				page: 1,
				limit: 15
			},
			tableData: [],
			dataCount: 0,
			checkedData: []
		};
	},
	computed: {
		...mapGetters(['dictEnums', 'principalData']),
		topButton() {
			return ['1b37d5b42ae0424dbfd8469491734ffe'];
		},
		topFrames() {
			return [...this.topButton, 'fe4d6cc2a7264ab8b2cea494bf0fd114'];
		}
	},
	watch: {
		timeRanges(data) {
			if (!data) {
				this.$delete(this.queryData, 'startTime');
				this.$delete(this.queryData, 'endTime');
			} else {
				this.$set(this.queryData, 'startTime', data[0]);
				this.$set(this.queryData, 'endTime', data[1]);
			}
		}
	},
	mounted() {
		this.handleResetQuery();
	},
	methods: {
		//获取表格数据
		async getTableData() {
			let params = { ...this.queryData };
			let result = await queryMarvelList(params).then((res) => res.data);
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		queryTableData() {
			this.loading = true;
			this.getTableData();
		},

		handleResetQuery() {
			this.queryData = { page: 1, limit: 15 };
			this.timeRanges = null;
			this.$nextTick(() => {
				this.queryTableData();
			});
		},

		handleSelectionChange(selection) {
			this.checkedData = [...selection];
		},

		async handleExportData() {
			let params = {};
			if (this.checkedData.length !== 0) {
				params['ids'] = this.checkedData.map((n) => n.id).join();
			} else {
				params = { ...this.queryData };
				delete params.page;
				delete params.limit;
			}
			window.location.href = `${window.baseUrl}stat/downloadMarvel${this.$objectToQuery(params)}`;
		}
	}
};
</script>

<style scoped></style>
